<template>
  <div class="fbxx">
    <div class="head">
      <span>分班信息配置</span>
      <button @click="add">添加配置</button>
      <button @click="update">编辑配置</button>
    </div>

    <div class="zzc" v-if="isShow">
      <div class="add">
        <div class="title">{{ title }}</div>
        <div class="container">
          <div class="item">
            <span>专业名称：</span>
            <el-input v-model="zydh" placeholder=""></el-input>
          </div>
          <div class="item">
            <span>班级名称：</span>
            <el-input v-model="bjmc" placeholder=""></el-input>
          </div>
          <div class="item">
            <span>班级数量：</span>
            <el-input v-model="bjsl" placeholder=""></el-input>
          </div>
          <div class="item">
            <span>班级代号：</span>
            <el-input v-model="bjdh" placeholder=""></el-input>
          </div>
          <div class="item">
            <span>院系代号：</span>
            <el-input
              v-model="yxbm"
              placeholder=""
              :disabled="isAble"
            ></el-input>
          </div>
          <button @click="ok">{{ info }}</button>
          <button @click="cancel">退出</button>
        </div>
      </div>
    </div>

    <el-table :data="tableData" height="720" border style="width: 100%">
      <el-table-column prop="zydh" label="专业名称" width="300">
      </el-table-column>
      <el-table-column prop="bjmc" label="班级名称" width="300">
      </el-table-column>
      <el-table-column prop="bjsl" label="班级数量"> </el-table-column>
      <el-table-column prop="bjdh" label="班级代号" width="300">
      </el-table-column>
      <el-table-column prop="yxbm" label="院系代号" width="300">
      </el-table-column>
      <el-table-column prop="zyRs" label="已录取人数" width="260">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "",
  data() {
    return {
      isShow: false,
      isAble: true,
      title: "",
      info: "",
      zydh: "",
      bjmc: "",
      bjsl: "",
      bjdh: "",
      yxbm: "",
      tableData: [],
    };
  },
  methods: {
    add() {
      this.title = "添加配置";
      this.info = "添加";
      this.isShow = true;
      this.isAble = false;
    },
    update() {
      this.title = "编辑配置";
      this.info = "修改";
      this.isShow = true;
      this.isAble = true;
    },
    ok() {
      // if (
      //   this.zydh == "" ||
      //   this.bjmc == "" ||
      //   this.bjsl == "" ||
      //   this.bjdh == "" ||
      //   this.yxbm == ""
      // ) {
      //   alert("请输入内容");
      // }
      if (
        this.title == "添加配置" &&
        this.zydh != "" &&
        this.bjmc != "" &&
        this.bjsl != "" &&
        this.bjdh != "" &&
        this.yxbm != ""
      ) {
        request({
          url: "http://118.31.51.131:8081/api/zsxt/fbgl/tj",
          method: "post",
          data: {
            zydh: this.zydh,
            bjmc: this.bjmc,
            bjsl: Number(this.bjsl),
            bjdh: this.bjdh,
            yxbm: this.yxbm,
            zyRs: 0,
          },
          params: {
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          console.log(value);
          if (value.data == "该专业分班配置已存在") {
            alert("该专业分班配置已存在");
          }
          if (value.data == "该专业不存在") {
            alert("该专业不存在");
          }
          if (value.data == 1) {
            request({
              url: "http://118.31.51.131:8081/api/zsxt/fbgl/ck",
              method: "post",
              params: {
                token: sessionStorage.getItem("token"),
              },
            }).then((value) => {
              console.log(value.data);
              this.tableData = value.data;
              this.isShow = false;
            });
          }
        });
      }

      if (
        this.title == "编辑配置" &&
        this.zydh != "" &&
        this.bjmc != "" &&
        this.bjsl != "" &&
        this.bjdh != ""
      ) {
        request({
          url: "http://118.31.51.131:8081/api/zsxt/fbgl/xg",
          method: "post",
          data: {
            zydh: this.zydh,
            bjmc: this.bjmc,
            bjsl: Number(this.bjsl),
            bjdh: this.bjdh,
            yxbm: this.yxbm,
            zyRs: 0,
          },
          params: {
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          console.log(value);
          if (value.data == "该专业不存在") {
            alert("该专业不存在");
          }
          if (value.data == 1) {
            request({
              url: "http://118.31.51.131:8081/api/zsxt/fbgl/ck",
              method: "post",
              params: {
                token: sessionStorage.getItem("token"),
              },
            }).then((value) => {
              console.log(value.data);
              this.tableData = value.data;
              this.isShow = false;
            });
          }
        });
      }
    },
    cancel() {
      this.isShow = false;
    },
  },
  beforeCreate() {
    if (sessionStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      let token = sessionStorage.getItem("token");
      let length = sessionStorage.getItem("token").length;
      if (token[length - 3] == "0") {
        this.$router.replace("/login");
      }
    }
  },
  created() {
    request({
      url: "http://118.31.51.131:8081/api/zsxt/fbgl/ck",
      method: "post",
      params: {
        token: sessionStorage.getItem("token"),
      },
    }).then((value) => {
      console.log(value.data);
      this.tableData = value.data;
    });
  },
  components: {},
};
</script>

<style scoped>
.head {
  height: 80px;
  border-bottom: 1px solid black;
}
.head span {
  font-size: 20px;
  line-height: 80px;
  margin-left: 25px;
}
.head button:nth-of-type(1) {
  margin-left: 1080px;
}
.head button:nth-of-type(2) {
  margin-left: 100px;
}
button {
  width: 100px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  background-color: rgb(192, 51, 56);
}
button:active {
  opacity: 0.8;
}

.zzc {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.zzc .add {
  position: absolute;
  left: calc(50% - 180px);
  top: calc(50% - 220px);
  height: 500px;
  width: 500px;
  border-radius: 50px;
  background-color: #fff;
}
.zzc button {
  width: 120px;
  height: 36px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  background-color: rgb(192, 51, 56);
}
.zzc button:active {
  opacity: 0.8;
}
.zzc button:nth-of-type(1) {
  margin: 20px 0 0 100px;
}
.zzc button:nth-of-type(2) {
  margin: 20px 0 0 60px;
}
.add .title {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 24px;
  /* font-weight: 700; */
}
.container .item {
  height: 60px;
  text-align: center;
}
.el-input {
  width: 200px;
}
.fbxx ::v-deep .el-table .cell {
  text-align: center;
}
</style>